<template>
	<view class="cp-container">
    <t-header @back="clickNavBackFn">个人信息</t-header>
		<!-- content -->
		<view class="cp-content">
			<tui-form ref="changePwt" style="display: none;"></tui-form>
			<view class="ui-c-content">
				<tui-input type="password" v-model="formData.oldpass" :labelSize="28" :size="28" label="原密码" placeholder="请输入"></tui-input>
				<tui-input type="password" v-model="formData.password" :labelSize="28" :size="28"  label="新密码" placeholder="请输入"></tui-input>
				<tui-input type="password" v-model="formData.confimpassword" :labelSize="28" :size="28" label="密码" placeholder="请再次输入新密码"></tui-input>
			</view>
			<view style="width: 710rpx; height: 96rpx; margin-top: 60rpx;">
				<tui-button type="theme" @click="submit">提交</tui-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref, inject} from 'vue';
import {onLoad} from '@dcloudio/uni-app';

const tui = inject('tui');

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// store
import {useUserStore} from '@/store/user.js';
// user
const userStore = useUserStore();

// api
import {editPass1} from '@/api/user.js';

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const formData = ref({
	oldpass:'',
	password:'',
	confimpassword:''
});
const changePwt = ref(null);

const submit = async () => {
	let rules = [
		{name:'oldpass',rule:['required'],msg:['请输入原密码']},
		{name:'password',rule:['required'],msg:['请输入新密码']},
		{name:'confimpassword',rule:['required','isSame:password'],msg:['请输入新密码','两次密码不一致']},
	]
	let postData = {...formData.value}
	let checkRes 
	try{
		checkRes = await changePwt.value.validate(formData.value,rules)
	}catch(e){
		//TODO handle the exception
		checkRes = e
	}
	if(checkRes.isPass){
		editPass1(postData).then(res=>{
			if(res.code==1){
				tui.modal(null,res.msg,false,()=>{
					uni.navigateBack()
				})
			}else{
				tui.toast(res.msg)
			}
		})
	}
	else{
		tui.toast(checkRes.errorMsg)
	}
};
</script>

<style lang="scss" scoped>
.cp-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.cp-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 18rpx 26rpx;
		
		.ui-c-content {
			width: 100%;
			height: 322rpx;
			padding: 8rpx 48rpx 8rpx 20rpx;
			border-radius: 34rpx;
			background: #FFFFFF;
			box-sizing: border-box;
		}
	}
}
</style>